<template>
  <div class="blogs_box">
    <div class="row">
      <div :class="[isHidden ? 'col-md-12' : 'col-md-8']">
        <!-- 轮播图区域 -->
        <transition name="el-fade-in-linear">
          <div class="carousel_box" v-show="isShowCarousel">
            <el-carousel :interval="5000" arrow="always" height="350px">
              <el-carousel-item v-for="item in imagesbox" :key="item.id">
                <!-- <h3>{{ item }}</h3> -->
                <img :src="item.idView" class="image" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </transition>

        <!-- <a href="#/trans">测试</a> -->

        <!-- 列表头、分割线区域 -->
        <div class="divider_box">
          <span class=""><i class="el-icon-menu square"></i></span>
          <span class="main-title">文章</span>
          <span class="vertical-line"></span>
          <span class="sub-title">Article</span>
          <span class="view-more"
            ><a href="#/blogClassify"
              >查看更多<i class="el-icon-caret-right"></i></a
          ></span>
        </div>

        <div>
          <!-- 文章列表区域 -->
          <div
            class="card_list"
            v-for="list in blogList"
            :key="list.bid"
          >
            <el-card>
              <h5>
                <router-link
                  class="card_title"
                  :to="{
                    name: 'BlogDetail',
                    params: { bid: list.bid },
                  }"
                >
                  <span>{{ list.title }}</span>
                </router-link>
              </h5>
              <div class="card_detail">
                <div class="rol">
                  <i class="el-icon-user"></i>
                  <span>作者：</span>
                  <span>{{ list.author }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-time"></i>
                  <span>发表于</span>
                  <span>{{ list.time }}</span>
                </div>
                <div class="rol" style="border-right: 1.2px solid #ccc">
                  <i class="el-icon-s-unfold"></i>
                  <span>分类：</span>
                  <span>{{ list.cid }}</span>
                </div>
                <!-- <div class="rol" style="border-right: 1.2px solid #ccc">
                  <i class="el-icon-view"></i>
                  <span>阅读量</span>
                  <span>{{ list.statistic.hits }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-chat-dot-round"></i>
                  <span>评论数</span>
                  <span>{{ list.statistic.commentsNum }}</span>
                </div> -->
              </div>
              <div class="card_desc">
                <p>
                  {{ list.summary }}
                  <!-- {{list.article.content}} -->
                </p>
              </div>
            </el-card>
          </div>

          <div class="mpage">
            <!-- 分页区域 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.cur"
              :page-sizes="[1,2,5,10]"
              :page-size="pageInfo.size"
              layout="total, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div :class="isHidden ? '' : 'col-md-4'">
        <!-- 详情介绍区域 -->
        <div class="detail_box">
          <div>
            <h3>{{uname}} &nbsp;&nbsp;&nbsp;欢迎您~</h3>
            <div>
              <el-avatar :size="120">
                <img
                  src="../../assets/img/user.jpg"
                  alt=""
                  v-if="userInfo !== null"
                />
                <img
                  src="../../assets/img/user.jpg"
                  alt=""
                  v-else
                />
              </el-avatar>
            </div>

            <!-- <div v-if="userInfo !== null">
              <span style="color: #40485b">{{ userInfo.username }}</span>
            </div>
            <div v-else><span style="color: #40485b">游客</span></div> -->
            <div class="maction">
              <span>
                <router-link to="/blogs" style="text-decoration: none">
                  <el-link type="info" :underline="false">主页</el-link>
                </router-link>
              </span>
              <el-divider direction="vertical"></el-divider>
              <span v-if="userInfo !== null">
                <router-link to="/blog/add" style="text-decoration: none">
                <el-link type="success" :underline="false">发表博客</el-link>
                </router-link>
              </span>
              <el-divider direction="vertical"></el-divider>
              <span v-if="userInfo !== null">
                <router-link to="/login" style="text-decoration: none">
                  <el-link type="danger" :underline="false" @click="back">退出</el-link>
                </router-link>
                </span>
              <span v-else
                ><router-link to="/login" style="text-decoration: none"
                  ><el-link type="primary" :underline="false"
                    >登录</el-link
                  ></router-link
                ></span
              >
            </div>
          </div>
        </div>

        <!-- 分类标签区域 -->
        <div class="classify_box">
          <h5>标签墙</h5>
          <div class="tag_box">
            <el-tag
              v-for="item in tagArr"
              :key="item.cid"
              effect="plain"
              :type="typeArr[Math.floor(Math.random() * typeArr.length)]"
            >
              <i class="el-icon-collection-tag"></i>
              {{ item.cname }} [ {{ item.desc }} ]
            </el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // 获取文章列表的参数对象
      pageInfo: {
        cur: 1, // 当前页
        size: 5, // 页大小
        text: ''
      },
      // 文章列表
      blogList: [],
      // 文章总数
      total: 0,
      // 日历数据
      // value: new Date(),
            // 欢迎界面
      uname: localStorage.getItem('username'),
      // 轮播图内容
      imagesbox: [
        { id: 0, idView: require('../../assets/img/carousel/a1.jpg'), title: '图片1' },
        { id: 1, idView: require('../../assets/img/carousel/a2.jpg'), title: '图片2' },
        { id: 2, idView: require('../../assets/img/carousel/a3.jpg'), title: '图片3' },
        { id: 3, idView: require('../../assets/img/carousel/a4.jpg'), title: '图片4' },
        { id: 4, idView: require('../../assets/img/carousel/a5.jpg'), title: '图片5' }
      ],
      // 是否隐藏col
      isHidden: false,
      // 是否展示轮播图
      isShowCarousel: true,
      // 标签数组
      tagArr: [],
      // 标签类型颜色
      typeArr: ['', 'success', 'info', 'danger', 'warning'],
      // 推荐文章参数
      hotArticle: {
        row: 5, // 返回行数，默认5
        condition: 1 // 1点击、2评论、3点赞
      }
    }
  },
  computed: {
    ...mapState(
      {
        userInfo: state => state.user.userInfo,
        backUrl: state => state.user.backUrl,
        BlogTitle: state => state.user.BlogTitle,
        // 用户是否登录，控制按钮是否可用
        canEdit () {
          let editable = false
          if (this.userInfo && this.userInfo.username !== '') {
            editable = true
          }
          return editable
        }
      }
    )
  },
  methods: {
    // 获取文章列表
    async getBlogList () {
      this.pageInfo.text = this.BlogTitle
      const { data: res } = await this.$http.get('/blog/all.do?currentPage=1&pageSize=10000')
      // const { data: res } = await this.$http.get('/blog/all.do', { params: this.pageInfo })
      console.log('获取文章列表', res)
      if (res.flag !== true) return this.$message.error('获取文章列表失败！')
      // 文章列表赋值
      // this.BlogList = res.data.list
      this.$store.commit('saveBlogList', res.data.datas)
      this.blogList = res.data.rows
      console.log(this.blogList)
      this.total = res.data.total
    },
    // 获取分类列表
    async getTagArr () {
      const { data: res } = await this.$http.get('/category/showAll.do')
      console.log('获取分类列表', res)
      if (res.flag !== true) return this.$message.error('获取标签列表失败！')
      this.tagArr = res.data
      console.log('获取分类列表', this.tagArr)
    },
    // // 获取推荐文章列表
    // async getHotAtrcleList () {
    //   const { data: res } = await this.$http.get('/article/recommend')
    //   // console.log(res)
    //   if (res.code !== 200) return
    //   this.hotAritcleList = res.data
    // },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
      //   console.log(newSize)
      this.pageInfo.size = newSize
      this.getBlogList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
      // console.log(newCur)
      this.pageInfo.cur = newCur
      // 在SessionStorage中记录当前的页数
      sessionStorage.setItem('currentPage', newCur)
      this.getBlogList()
    },

    // 当从详情页返回的时候，先获取详情页中存下来的detall标识，
    // 在列表页中，把获取到的分页页码重新赋值赋值，
    // 用以返回前的页面，保持不变
    backGetCurrentPage () {
      if (sessionStorage.getItem('pageDetail')) {
        this.pageInfo.cur = Number(sessionStorage.getItem('currentPage'))
        // console.log('返回当前页')
        // console.log(this.pageInfo.cur)
      } else {
        this.pageInfo.cur = 1
        // 第一次进入列表页，清除缓存里面的数据
        sessionStorage.removeItem('currentPage')
      }
    },
    // 退出登录
    async back () {
      this.$message.success('退出成功！')
      window.localStorage.clear()
      // 删除vuex里的用户数据
      localStorage.clear()
      this.$store.commit('clearUserInfo')
    }
  },
  // 监听搜索框，有变化就调用接口，内容不空隐藏轮播
  watch: {
    BlogTitle (val, oldVal) {
      // console.log('BlogTitle: ' + val, oldVal)
      if (val !== '') {
        this.isShowCarousel = false
        this.pageInfo.size = 6 // 没了轮播有点空，查多点数据
      } else {
        this.isShowCarousel = true
        this.pageInfo.size = 5
      }
      // 调用接口获得新数据渲染
      this.getBlogList()
    }
  },
  created () {
    // 返回的时候保持之前访问的“页”面
    this.backGetCurrentPage()
    this.getBlogList()
    this.getTagArr()
    // this.getHotAtrcleList()
    if (document.body.clientWidth < 1000) {
      this.isHidden = true
    }
  },
  mounted () {
    // 监听屏幕大小，宽度小于1000将隐藏右边的栏目
    window.onresize = () => {
      return (() => {
        // console.log(document.body.clientWidth)
        if (document.body.clientWidth < 1000) {
          this.isHidden = true
        } else {
          this.isHidden = false
        }
      })()
    }
  },
  destroyed () {
    // 离开当前页，删除，确保其他页访问列表页时，可以从第一页开始
    sessionStorage.removeItem('pageDetail')
  }

}
</script>

<style lang="less" scoped>
a:hover {
  text-decoration: none;
}
.carousel_vertical {
  background-color: rgb(172, 169, 169);
}
.blogs_box {
  min-height: 1800px;
  opacity: 0.9 !important;
  .mpage {
    margin: 0 auto;
    text-align: center;
  }
}

.carousel_box {
  box-sizing: border-box;
  // 边框样式
  border-radius: 3px;
  // padding: 5px;

  .image {
    border-radius: 20px;
    width: 100%;
    height: inherit;
    background-size: cover;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    padding: 5px;
  }
}
.calendar_box {
  margin-top: 4%;
  border-radius: 3px;
  border: 1px solid #eee;
  // background-color: #fff;
  background: rgba(255, 255, 255, 0.3);
  h5 {
    font-size: 18px;
    color: #333;
    text-align: left;
    border-left: 5px solid #409eff;
    border-right: none;
    padding: 2% 5% 3%;
  }
  .el-calendar {
    background: rgba(255, 255, 255, 0.3) !important;
  }
}
.divider_box {
  margin: 5% 0;
  // display: flex;
  // align-items: center;
  .square {
    vertical-align: middle;
    font-size: 34px;
  }
  .main-title {
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    padding: 0 10px;
    color: #000;
  }
  .sub-title {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    padding-left: 10px;
    color: #333;
  }
  .vertical-line {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    width: 1px;
    background-color: #333;
  }
  .view-more {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    padding-left: 10px;
    padding-top: 1px;
    a {
      font-weight: 500;
      color: #409eff;
      cursor: pointer;
    }
  }
}
.detail_box {
  margin-bottom: 4%;
  text-align: center;
  // background-color: #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.classify_box {
  margin-top: 4%;
  padding-bottom: 4%;
  // min-height: 20%;
  border-radius: 3px;
  border: 1px solid #eee;
  // background-color: #fff;
  background: rgba(255, 255, 255, 0.3);

  h5 {
    font-size: 18px;
    color: #333;
    text-align: left;
    border-left: 5px solid #409eff;
    border-right: none;
    padding: 2% 5% 3%;
  }
  .tag_box {
    padding: 0% 5%;
    .el-tag {
      margin: 2%;
    }
  }
  .list_box {
    padding: 0% 8%;
    ul {
      padding: 0 !important;
      list-style: none;
      li {
        cursor: pointer;
        padding: 2% 2%;
        border-top: 1px solid #eee;
        transition: all 0.5s;
        border-radius: 2%;
        a {
          color: #333;
          text-decoration: none;
          transition: all 0.5s;
        }
        a:hover {
          color: rgb(117, 147, 238);
        }
        .router-link-active {
          text-decoration: none;
        }
      }
      li:hover {
        margin: 0 -2%;
        background: rgb(226, 250, 220);
        color: rgb(117, 147, 238);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        span {
          color: rgb(248, 98, 236);
        }
      }
      .desk {
        margin-bottom: 3%;
        span {
          text-align: justify;
          color: #888;
          font-size: 13px;
          line-height: 20px;
        }
        .blogdesk {
          height: 100px;
          width: inherit;
          cursor: pointer;
          overflow: hidden;
          img {
            height: inherit;
            width: 100%;
            transition: all 0.9s;
          }
          img:hover {
            transform: scale(1.1);
          }
        }
      }
    }
    .title {
      // border-top: 1px solid #eee;
      // margin-top: 2%;
    }
    .date {
      margin-top: 2%;
      font-size: 13px;
      line-height: 18px;
      font-weight: 100;
      color: #888;
      display: flex;
      justify-content: space-between;

      .stat_list {
        font-size: 0.7rem;
        line-height: 20px;
        i {
          margin-left: 5px;
          margin-right: 2px;
        }
      }
    }
  }
}

@media only screen and (max-width: 1000px) {
  .calendar_box {
    width: 0;
    display: none;
  }
  .detail_box {
    width: 0;
    display: none;
  }
  .classify_box {
    width: 0;
    display: none;
  }
  .mpage {
    width: inherit;
    overflow: hidden;
  }
}

.el-avatar {
  border: 1px solid rgb(243, 219, 190);
  background-color: rgb(252, 251, 249);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  position: relative;
  img {
    border-radius: 50%;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
.card_list {
  .el-card {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    min-height: 200px;
    margin: 0 !important;
    margin-bottom: 5% !important;

    .card_title {
      color: #606266;
      font-size: 1.6rem;
    }
    .card_title:hover {
      color: #007bff;
      text-decoration: none;
    }
    .card_detail {
      width: 100%;
      font-size: 12px;
      color: #999;
      padding: 10px 0;
      .rol {
        float: left;
        margin-right: 8px;
        i {
          margin-right: 4px;
        }
        span {
          margin-right: 5px;
        }
      }
    }
    .card_desc {
      width: 100%;
      color: #555;
      font-size: 16px;
      line-height: 2;
      padding-top: 2%;

      p {
        width: 85%;
        overflow: hidden;
        display: -webkit-box; //将元素设为盒子伸缩模型显示
        -webkit-box-orient: vertical; //伸缩方向设为垂直方向
        -webkit-line-clamp: 2; //超出3行隐藏，并显示省略号
      }
    }
  }
}
</style>

<style lang="less">
.el-calendar-day {
  height: 100% !important;
}
.row {
  margin: 0 !important;
  padding: 0 !important;
}
</style>
